import React, { PureComponent } from 'react';
import { Card, message, Button, Upload } from 'antd';
import { FolderOpenOutlined,  } from '@ant-design/icons';
import { renderAsync } from 'docx-preview';
import JSZip from 'jszip';
import { getToken } from '@/utils/utils';
import { getMd5 } from '@/utils/utils';
import { fingerprintFetch } from '@/utils/request';

class WordView extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {};
  }

  componentDidMount () {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  fecthFile = async (file: any) => {
    const { fileUrl } = file;
    if (!fileUrl) {
      message.error('日志文件缺失或格式不正确，无法预览！');
      return;
    }
    const str = `${window.g.url}/common/download?strUrl=` + fileUrl;
    const tempStr = decodeURIComponent(fileUrl);  //  解码
    let md5 = getMd5('strUrl=' + tempStr);
    const newOptions: any = {};
    newOptions.method = 'GET';
    newOptions.headers = {
      OptAuthorization: `${getToken()}`,
      shaSign: md5,
      'Content-Type': 'application/json;charset=utf-8',
    };
    fingerprintFetch(str, newOptions)
      .then(response => {
        if (response.status === 200) {
          return response.blob();
        } else {
          throw response;
        }
      })
      .then(blob => {
        const dm = document.getElementById('word-render') as HTMLElement;
        renderAsync(blob, dm);
      })
      .catch(() => message.error('预览失败，请稍后在试!'))
  }

  initView = (file: any) => {
    this.fecthFile(file);
  }

  /* onChange = (info: any) => {
    if (info.file) {
      let reader = new FileReader();
      reader.readAsArrayBuffer(info.file);
      reader.onload = function (event: any) {
        let blob = new Blob([event.target.result], { type: info.file.type });
        const dm = document.getElementById('word-render') as HTMLElement;
        renderAsync(blob, dm);
      }
    }
  } */

  render() {
    return (
      <>
        <div id="word-render" style={{ width: '100%', height: '100%', inset: '32px 0 0', }}></div>
      </>
      
    )
  }
}
export default WordView;
